{% extends 'base.html' %}
{% block title %}
    首页
{% endblock %}
{% block style %}
    <link href="{% static 'css/index.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<!-- 主体部分标题 -->
    <div class="blog-header">
      <h1 class="blog-title">博客系统</h1>
      <p class="lead blog-description">用于django项目实战</p>
    </div>
    <div class="row">
      <!-- 文章列表 -->
      <div class="col-sm-8 blog-main">
        <div class="blog-post">
            {% for article in articles %}
                <div class="blog-post-item">
                    <h2 class="blog-post-title"><a href="{% url 'comment:detail' %}?id={{ article.pk }}">{{article.title}}</a></h2>
                    <p class="blog-post-meta">时间：{{ article.pub_time }} &nbsp;&nbsp;分类：<a href="#">{{ article.classify.name }}</a> &nbsp;&nbsp;作者：<a href="#">{{ article.author.username }}</a></p>
                    <p>{{ article.info }}</p>
              </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        <nav aria-label="">
          <ul class="pager">
            {% if page_obj.has_previous %}
                <li><a href="{% url 'comment:index' %}?p={{ page_obj.previous_page_number }}">上一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}

            {% if page_obj.has_next %}
                <li><a href="{% url 'comment:index' %}?p={{ page_obj.next_page_number }}">下一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">下一页</a></li>
            {% endif %}
          </ul>
        </nav>

      </div>
      <!-- 侧边栏 -->
      <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
        <div class="sidebar-module sidebar-module-inset">
          <h4>关于</h4>
          <p>项目简介</p>
        </div>
        <div class="sidebar-module">
          <h4>源码</h4>
          <ol class="list-unstyled">
            <li><a href="#">GitHub</a></li>
            <li><a href="#">Gitee</a></li>
          </ol>
        </div>
      </div>
    </div>
{% endblock %}
{% block script %}
    <script src="../static/js/nav.js"></script>
{% endblock %}
